<app-overview [title]="title" [appUuid]="appUuid"></app-overview>
<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">总体概况</div>
        <div echarts [options]="radarOption" class="line-chart"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">组件等级概况</div>
        <div echarts [options]="option" class="line-chart"></div>
      </div>
    </div>
  </div>
</div>

<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">源代码检测</div>
        <div echarts [options]="barOption" class="line-chart"></div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">许可使用情况</div>
        <div echarts [options]="pieOption" class="line-chart"></div>
      </div>
    </div>
  </div>
</div>

<div class="margin-example">
  <div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">高危组件: TOP 10</div>
        <div>
          <nz-table [nzData]="jarseverityData" #jarserverity nzShowPagination='false'>
            <thead>
              <tr>
                <th>组件名</th>
                <th>CVE</th>
                <th>等级</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of jarserverity.data">
                <td>{{data.jarName}}</td>
                <td>{{data.cveNum}}</td>
                <td>{{data.grade}}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
      <div class="echarts-box">
        <div class="echarts-title">未经授权的组件</div>
        <div>
          <nz-table nzWidth="80%" [nzData]="jarnopermissionData" #jarnopermission nzShowPagination='false'>
            <thead>
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of jarnopermission.data">
                <td>{{data.unPermissionJarName}}</td>
                <td>{{data.licenseId}}</td>
                <td>{{data.createTime}}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
</div>